<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="http://unpkg.com/element-ui@1.3.6/lib/theme-default/index.css" />
    </head>
    <body>
        <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.6/lib/index.js"></script>
        <div id="app">
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px">
              <el-form-item label="年龄" prop="age" :rules="[{required:true,message:'年龄不能为空'},{type:'number',message:'年龄必须为数字'}]">
                <el-input v-model.number="numberValidateForm.age" type="age" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
        <script>
          new Vue({
            el:'#app',
            data() {
              return {
                numberValidateForm:{
                  age:''
                }
              };
            },
            methods: {
              submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                  if(valid){
                    alert('submit');
                  }else{
                    console.log('error submit!');
                    return false;
                  }
                })
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              }
            }
          });
        </script>
    </body>
</html>